<!--
  #%L
  thinkbig-ui-feed-manager
  %%
  Copyright (C) 2017 ThinkBig Analytics
  %%
  Licensed under the Apache License, Version 2.0 (the "License");
  you may not use this file except in compliance with the License.
  You may obtain a copy of the License at
  
      http://www.apache.org/licenses/LICENSE-2.0
  
  Unless required by applicable law or agreed to in writing, software
  distributed under the License is distributed on an "AS IS" BASIS,
  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  See the License for the specific language governing permissions and
  limitations under the License.
  #L%
  -->
<vertical-section-layout section-title='{{"views.feed-data-policies.TS&DP" | translate}}' on-save-edit="vm.onSave()" on-edit="vm.onEdit()" on-cancel-edit="vm.onCancelEdit()" allow-edit="vm.allowEdit"
                         editable="vm.editableSection" keep-editable-after-save="true" the-form="vm.editFeedDataPoliciesForm">

  <readonly-section>

    <div layout="row" class="feed-property" ng-if="vm.model.table.method != 'EXISTING_TABLE'">
      <span flex="25" class="property-name">{{"views.feed-data-policies.SFRF" | translate}}</span>

      <div flex layout="column">
        <span>{{vm.model.table.feedFormat}}</span>
      </div>
    </div>

    <div layout="row" class="feed-property">
      <span flex="25" class="property-name">{{"views.feed-data-policies.DTN" | translate}}</span>

      <div flex layout="column">
        <span>{{vm.model.category.systemName}}.{{vm.model.table.tableSchema.name}}</span>
      </div>
    </div>


    <md-list flex layout-fill class="list-item-table list-condensed data-policy-header feed-property">

      <md-list-item>
        <div layout="row" layout-fill>
          <div flex="25" class="md-list-item-text hint">
            {{"views.feed-data-policies.FN" | translate}}
          </div>
          <div flex="10" layout="column" layout-align="center center" class="md-list-item-text hint">
            <div>{{"views.feed-data-policies.Domain" | translate}}</div>
            <div>{{"views.feed-data-policies.Type" | translate}}</div>
          </div>
          <div flex="40" class="md-list-item-text hint" layout="row" layout-align="space-between start">
            <div class="data-policy-item-check-box" layout="column" layout-align="center center" >
              {{"views.feed-data-policies.Primary" | translate}}
              <md-tooltip md-direction="top">
                {{"views.feed-data-policies.ItcitPKftr" | translate}}
              </md-tooltip>
            </div>
            <div class="data-policy-item-check-box" layout="column" layout-align="center center" >
              <div>{{"views.feed-data-policies.Created" | translate}}</div>
              <div>{{"views.feed-data-policies.Date" | translate}}</div>
              <md-tooltip md-direction="top">
              {{"views.feed-data-policies.Itfaiowtrwc" | translate}}
              </md-tooltip>
            </div>
            <div class="data-policy-item-check-box" layout="column" layout-align="center center" >
              <div>{{"views.feed-data-policies.Updated" | translate}}</div>
              <div>{{"views.feed-data-policies.UDate" | translate}}</div>
              <md-tooltip md-direction="top">
                {{"views.feed-data-policies.Itfaiowtrwu" | translate}}
              </md-tooltip>
            </div>
            <div class="data-policy-item-check-box" layout="column" layout-align="center center" >
              {{"views.feed-data-policies.Index" | translate}}
              <md-tooltip md-direction="top">
                {{"views.feed-data-policies.DwsbstGS" | translate}}
              </md-tooltip>
            </div>
            <div class="data-policy-item-check-box" layout="column" layout-align="center center" >
              {{"views.feed-data-policies.Profile" | translate}}
              <md-tooltip md-direction="top">
                {{"views.feed-data-policies.Stfbp" | translate}}
              </md-tooltip>
            </div>
          </div>
          <div flex="25" class="md-list-item-text hint layout-margin-left-10" layout="column" layout-align="center start" >
            <div>{{"views.feed-data-policies.Standardize" | translate}}</div>
            <div>{{"views.feed-data-policies.Validate" | translate}}</div>
          </div>
        </div>
      </md-list-item>

      <md-list-item
          style="height: 55px"
          ng-if="vm.model.table.fieldPolicies.length > 0 && vm.model.table.fieldPolicies.length < 30"
          ng-repeat="policy in vm.model.table.fieldPolicies">
        <ng-include
            layout="row" layout-fill
            src="'js/feed-mgr/feeds/edit-feed/details/feed-data-policies-row-readonly.html'"></ng-include>
      </md-list-item>
      <md-virtual-repeat-container
          ng-if="vm.model.table.fieldPolicies.length >= 30"
          style="min-height: 700px"
          class="virtual-repeat-scroller-overlay">
        <div
            style="height: 40px;"
            md-virtual-repeat="policy in vm.model.table.fieldPolicies">
          <ng-include
              layout="row" layout-fill
              src="'js/feed-mgr/feeds/edit-feed/details/feed-data-policies-row-readonly.html'"></ng-include>
        </div>
      </md-virtual-repeat-container>


    </md-list>


    <div layout="row" class="layout-padding-top-bottom">
      <span flex class="property-name">{{"views.feed-data-policies.Partitions" | translate}}</span>
    </div>

    <md-list flex layout-fill class="list-item-table list-condensed" ng-if="vm.model.table.partitions.length >0">

      <md-list-item>
        <div layout="row" layout-fill>
          <div flex="50" class="md-list-item-text hint">
            {{"views.feed-data-policies.PN" | translate}}
          </div>
          <div flex="30" class="md-list-item-text hint">
            {{"views.feed-data-policies.SF" | translate}}
          </div>
          <div flex="20" class="md-list-item-text hint">
            {{"views.feed-data-policies.PF" | translate}}
          </div>
        </div>
      </md-list-item>


      <md-list-item ng-repeat="field in vm.model.table.partitions">
        <div layout="row" layout-fill class="feed-property">
          <div flex="50" class="md-list-item-text">
            <div>{{field.field}}</div>
          </div>
          <div flex="30" class="md-list-item-text">
            <div>{{field.sourceField}}</div>
          </div>
          <div flex="20" class="md-list-item-text">
            <div>{{field.formula}}</div>
          </div>
        </div>
        <md-divider></md-divider>
      </md-list-item>
    </md-list>

    <div layout="row" class="feed-property" ng-if="vm.model.table.partitions.length ==0">
      <span flex class="property-name">{{"views.feed-data-policies.NPIE" | translate}}</span>
    </div>

    <div layout="row" class="feed-property versions-{{vm.diff('/table/targetMergeStrategy')}}"
         ng-if="vm.model.table.method != 'EXISTING_TABLE'">
      <span flex="25" class="property-name">{{"views.feed-data-policies.MS" | translate}}</span>

      <div flex layout="column">
        <span>{{vm.mergeStrategyDisplayName(vm.model)}}</span>
      </div>
      <div flex layout="column" ng-if="vm.versions">
        <span>{{vm.mergeStrategyDisplayName(vm.versionFeedModel)}}</span>
      </div>
    </div>
    <div layout="row" class="feed-property versions-{{vm.diff('/table/targetFormat')}}">
      <span flex="25" class="property-name">{{"views.feed-data-policies.TF" | translate}}</span>
      <span flex>{{vm.model.table.targetFormat}}</span>
      <span flex ng-if="vm.versions">{{vm.versionFeedModel.table.targetFormat}}</span>
    </div>

    <div layout="row" class="feed-property versions-{{vm.diff('/table/options/compressionFormat')}}">
      <span flex="25" class="property-name">{{"views.feed-data-policies.Co" | translate}}</span>
      <span flex>{{vm.model.table.options.compressionFormat}}</span>
      <span flex ng-if="vm.versions">{{vm.versionFeedModel.table.options.compressionFormat}}</span>
    </div>


    <div layout="row" class="feed-property versions-{{vm.diff('/options/skipHeader')}}">
      <span flex="25" class="property-name">{{"views.feed-data-policies.Options" | translate}}</span>

      <div flex layout="row" layout-align="start start" layout-wrap="true">
        <div layout="row" layout-align="start center" >
          <ng-md-icon class="primary-color-1" icon="check_box" ng-if="vm.model.options.skipHeader"></ng-md-icon>
          <ng-md-icon class="primary-color-1" icon="check_box_outline_blank" ng-if="!vm.model.options.skipHeader"></ng-md-icon>
          <span class="property-name">{{"views.feed-data-policies.Sh" | translate}}</span>
        </div>
      </div>
      <div flex layout="row" layout-align="start start" ng-if="vm.versions && vm.versionFeedModel.options">
        <div layout="row" layout-align="start center" >
            <ng-md-icon class="primary-color-1" icon="check_box" ng-if="vm.versionFeedModel.options.skipHeader"></ng-md-icon>
            <ng-md-icon class="primary-color-1" icon="check_box_outline_blank" ng-if="!vm.versionFeedModel.options.skipHeader"></ng-md-icon>
            <span class="property-name">{{"views.feed-data-policies.Sh" | translate}}</span>
        </div>
      </div>
    </div>





  </readonly-section>
  <editable-section>
    <ng-form name="vm.editFeedDataPoliciesForm">
    <div layout="row" class="feed-property" ng-if="vm.model.table.method != 'EXISTING_TABLE'">
      <span flex="25" class="property-name">{{"views.feed-data-policies.SFRF2" | translate}}</span>

      <div flex layout="column">
        <span>{{vm.model.table.feedFormat}}</span>
      </div>
    </div>

    <div layout="row" class="feed-property">
      <span flex="25" class="property-name">{{"views.feed-data-policies.DTN2" | translate}}</span>

      <div flex layout="column">
        <span>{{vm.model.category.systemName}}.{{vm.model.table.tableSchema.name}}</span>
      </div>
    </div>

    <md-list flex
             layout-fill
             class="list-item-table list-condensed data-policy-header feed-property">

      <md-list-item>
        <div layout="row" layout-fill>
          <div flex="25" class="md-list-item-text hint">
            {{"views.feed-data-policies.FN2" | translate}}
          </div>
          <div flex="10" layout="column" layout-align="start center" class="md-list-item-text hint">
            <div>{{"views.feed-data-policies.Domain2" | translate}}</div>
            <div>{{"views.feed-data-policies.Type2" | translate}}</div>
          </div>
          <div flex="40" class="md-list-item-text hint" layout="row" layout-align="space-between start">
            <div class="data-policy-item-check-box" layout="column" layout-align="center center" >
              {{"views.feed-data-policies.Primary2" | translate}}
              <md-tooltip md-direction="top">
                {{"views.feed-data-policies.ItcitPKftr2" | translate}}
              </md-tooltip>
            </div>
            <div class="data-policy-item-check-box" layout="column" layout-align="center center" >
              <div>{{"views.feed-data-policies.Created2" | translate}}</div>
              <div>{{"views.feed-data-policies.Date2" | translate}}</div>
              <md-tooltip md-direction="top">
                {{"views.feed-data-policies.Itfaiowtrwc2" | translate}}
              </md-tooltip>
            </div>
            <div class="data-policy-item-check-box" layout="column" layout-align="center center" >
              <div>{{"views.feed-data-policies.Updated2" | translate}}</div>
              <div>{{"views.feed-data-policies.UDate2" | translate}}</div>
              <md-tooltip md-direction="top">
                {{"views.feed-data-policies.Itfaiowtrwu2" | translate}}
              </md-tooltip>
            </div>
            <div class="data-policy-item-check-box" layout="column" layout-align="center center" >
              <div ng-if="vm.shouldIndexingOptionsBeEnabled()" flex="10" class="md-list-item-text hint">{{"views.feed-data-policies.Index2" | translate}}</div>
              <div ng-if="vm.shouldIndexingOptionsBeDisabled()" flex="10" class="md-list-item-text hint">{{"view.feed-data-policies.Index2Star" | translate}}</div>
              <md-tooltip md-direction="top" ng-if="vm.shouldIndexingOptionsBeEnabled()">
                {{"views.feed-data-policies.DwsbstGS2" | translate}}
              </md-tooltip>
              <md-tooltip md-direction="top" ng-if="vm.shouldIndexingOptionsBeDisabled()">
                {{"views.feed-data-policies.HripCd" | translate}}
              </md-tooltip>
              <md-input-container class="md-block">
                <md-checkbox aria-label="Select All"
                             ng-disabled = "vm.shouldIndexingOptionsBeDisabled()"
                             ng-checked="vm.indexCheckAll.isChecked"
                             md-indeterminate="vm.indexCheckAll.isIndeterminate"
                             ng-click="vm.indexCheckAll.toggleAll()"
                             style="margin-left:-1px;"></md-checkbox>
              </md-input-container>
            </div>
            <div class="data-policy-item-check-box" layout="column" layout-align="center center" >
              {{"views.feed-data-policies.Profile2" | translate}}
              <md-tooltip md-direction="top">
                {{"views.feed-data-policies.Stfbp2" | translate}}
              </md-tooltip>
              <md-input-container class="md-block">
                <md-checkbox aria-label="Select All"
                             ng-checked="vm.profileCheckAll.isChecked"
                             md-indeterminate="vm.profileCheckAll.isIndeterminate"
                             ng-click="vm.profileCheckAll.toggleAll()"
                style="margin-left:-1px;">
                </md-checkbox>
              </md-input-container>
            </div>
          </div>
          <div flex="25" class="md-list-item-text hint layout-margin-left-10" layout="column" layout-align="start start" >
            <div>{{"views.feed-data-policies.Standardize2" | translate}}</div>
            <div>{{"views.feed-data-policies.Validate2" | translate}}</div>
          </div>
        </div>
      </md-list-item>
      <div layout="row" layout-fill flex>
        <span style="margin-top:-10px;" layout-fill flex>
           <md-divider style="border-top-color:grey"></md-divider>
        </span>
      </div>


      <md-list-item
          style="height: 55px"
          ng-if="vm.model.table.fieldPolicies.length > 0 && vm.model.table.fieldPolicies.length < 30"
          ng-repeat="policy in vm.editModel.fieldPolicies">
        <ng-include
            layout="row" layout-fill
            src="'js/feed-mgr/feeds/edit-feed/details/feed-data-policies-row-editable.html'"></ng-include>
      </md-list-item>
      <md-virtual-repeat-container
          ng-if="vm.model.table.fieldPolicies.length >= 30"
          style="min-height: 700px;"
          class="virtual-repeat-scroller-overlay">
        <div
            style="height: 50px;"
            md-virtual-repeat="policy in vm.editModel.fieldPolicies">
          <ng-include
              layout="row" layout-fill
              src="'js/feed-mgr/feeds/edit-feed/details/feed-data-policies-row-editable.html'"></ng-include>
        </div>
      </md-virtual-repeat-container>


    </md-list>


    <md-input-container class="md-block layout-padding-top-bottom flex-gt-sm condensed" flex-gt-sm="" style="">
      <label class="label-small md-container-ignore">{{"views.feed-data-policies.MS2" | translate}}</label>
      <md-radio-group ng-model="vm.editModel.table.targetMergeStrategy" layout="row" layout-wrap="true" class="layout-padding-top" name="targetMergeStrategy" ng-change="vm.onChangeMergeStrategy()">
        <md-radio-button ng-repeat="strategy in vm.mergeStrategies"
                         ng-value="strategy.type"
                         aria-label="{{strategy.name}}"
                         ng-disabled="strategy.disabled">
          {{strategy.name}}
          <div class="hint">{{strategy.hint}}</div>
        </md-radio-button>
      </md-radio-group>
      <div ng-messages="vm.editFeedDataPoliciesForm['targetMergeStrategy'].$error" md-auto-hide="false">
        <div ng-message="invalidPKOption">{{"views.feed-data-policies.APKmbstuts" | translate}}</div>
        <div ng-message="invalidRollingSyncOption">{{"views.feed-data-policies.APmbatuts" | translate}}</div>
      </div>
    </md-input-container>


    <md-input-container class="md-block layout-padding-top-bottom flex-gt-sm condensed" flex-gt-sm="" style="">
      <label class="label-small md-container-ignore">{{"views.feed-data-policies.TF2" | translate}}</label>
      <md-select ng-model="vm.editModel.table.targetFormat" disabled="true">
        <md-option ng-repeat="opt in vm.targetFormatOptions" ng-value="opt.value">
          {{opt.label}}
        </md-option>
      </md-select>
    </md-input-container>


    <md-input-container class="md-block layout-padding-top-bottom flex-gt-sm condensed" flex-gt-sm="" style="">
      <label class="label-small md-container-ignore">{{"views.feed-data-policies.Co2" | translate}}</label>
      <md-select ng-model="vm.editModel.table.options.compressionFormat" disabled="true">
        <md-option ng-repeat="opt in vm.compressionOptions track by $index" ng-value="opt">
          {{opt}}
        </md-option>
      </md-select>
    </md-input-container>


    <md-input-container class="md-block layout-padding-top-bottom condensed" style="padding-left:0px;padding-right:0px;">
      <label class="label-small md-container-ignore">{{"views.feed-data-policies.Options" | translate}}</label>

      <div layout="row" class="layout-padding-top ">
        <md-checkbox ng-model="vm.editModel.options.skipHeader" aria-label="Skip Header">
          {{"views.feed-data-policies.Shr" | translate}}
        </md-checkbox>
        <!--
        <md-checkbox ng-model="vm.editModel.table.options.auditLogging" aria-label="Audit Logging">
          {{"views.feed-data-policies.AL2" | translate}}
        </md-checkbox>
        <md-checkbox ng-model="vm.editModel.table.options.encrypt" aria-label="Encrypt">
          {{"views.feed-data-policies.Encrypt2" | translate}}
        </md-checkbox>
        -->
      </div>
    </md-input-container>

    </ng-form>
  </editable-section>

</vertical-section-layout>
